<template>
    <div class="home">
        <Header style="z-index:1025">
            <header-menu :index="'3-4'"></header-menu>
        </Header>
        <top-search :navlist="NavTitle" :height="15"></top-search>
        <title-list :list="listTitle" :width="130"></title-list>
        <div class="swiper">
            <Carousel autoplay loop>
                <CarouselItem>
                    <div class="carousel">
                        <img src="../../assets/banner.png" alt="">
                    </div>
                </CarouselItem>
                <CarouselItem>
                    <div class="carousel">
                        <img src="../../assets/banner.png" alt="">
                    </div>
                </CarouselItem>
                <CarouselItem>
                    <div class="carousel">
                        <img src="../../assets/banner.png" alt="">
                    </div>
                </CarouselItem>
                <CarouselItem>
                    <div class="carousel">
                        <img src="../../assets/banner.png" alt="">
                    </div>
                </CarouselItem>
                <CarouselItem>
                    <div class="carousel">
                        <img src="../../assets/banner.png" alt="">
                    </div>
                </CarouselItem>
            </Carousel>
        </div>
        <div class="container clearfix">
            <div class="container-left clearfix">
                <small-nav :navlist="navlist" :salelist="salelist"></small-nav>
            </div>
            <div class="container-right clearfix">
                <side-list :list="sidelist"></side-list>
            </div>
            <div style="clear: both"></div>
            <div class="conten">
                <small-nav :navlist="hotlist" :List="List" v-on:childevent='wathChildEvent'></small-nav>
            </div>
        </div>
        <bottom-icon></bottom-icon>
        <Footer>
            <page-footer></page-footer>
        </Footer>
    </div>
</template>

<script>
    import HeaderMenu from '../../components/Header/'
    import PageFooter from '../../components/Footer/'
    import BottomIcon from '../../components/BottomIcon/'
    import CricleTop from '../../components/Circle/Cricle-top'
    import TitleList from '../../components/Usertop/TitleList'
    import TopSearch from '../../components/TopSearch/'
    import SmallNav from '../../components/Commodity/SmallNav'
    import SideList from "../../components/SideMenu/SideList"
    import SaleOption from "../../components/Commodity/SaleOption"
    export default {
        name: "home",
        components: {
            PageFooter,
            BottomIcon,
            HeaderMenu,
            CricleTop,
            TitleList,
            TopSearch,
            SmallNav,
            SideList,
            SaleOption
        },
        data () {
            return {
                NavTitle:{
                    id:1,
                    name:'美淘',
                    mytext:'我的预约',
                    type:2
                },
                listTitle: [
                    {id:1,name:"首页",show:false,path:'/commodity'},
                    {id:2,name:"热门项目",show:false,path:'/hotproject'},
                    {id:3,name:"商城",show:true,path:'/hotcommodity'},
                    {id:4,name:"医院",show:false,path:'/comhospital'},
                    {id:5,name:"美容机构",show:false,path:'/cosmetology'},
                    {id:6,name:"医生",show:false,path:'/beautician'},
                    {id:7,name:"翻译 ",show:false,path:'/translate'},
                    {id:8,name:"律师",show:false,path:'/lawyer'},
                ],
                navlist: [
                    {
                        id:1,
                        title:'特卖',
                        text:'全新特卖',
                        text1:'疯狂开始',
                        text2:'下期预告',
                        type:1

                    },

                ],
                hotlist:[
                    {
                        id:1,
                        title:'热卖',
                        text:'最新产品',
                        text1:'火爆全球',
                        type:0
                    }
                ],
                List: [],
                sidelist: [
                    {
                        id: 1,
                        name: '竞价排名',
                        child: [
                            {id: 1,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                            {id: 2,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                            {id: 3,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                            // {id: 4,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'}
                        ]
                    },
                    {
                        id: 2,
                        name: '大家正在预约',
                        child: [
                            {id: 21,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                            {id: 22,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                            {id: 23,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                            // {id: 24,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'}
                        ]
                    },
                    {
                        id: 3,
                        name: '新品推荐',
                        child: [
                            {id: 21,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                            {id: 22,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                            {id: 23,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                            // {id: 24,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'}
                        ]
                    },
                    {
                        id: 4,
                        name: '本周医院销量排行',
                        sale:1,
                        child: [
                            {id: 21,title: '红粉美淘', num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                            {id: 22,title: '红粉美淘', num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                            {id: 23,title: '红粉美淘', num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                            // {id: 24,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'}
                        ]
                    },
                    {
                        id: 5,
                        name: '本周医生销量排行',
                        sale:1,
                        child: [
                            {id: 21,title: '红粉美淘', num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                            {id: 22,title: '红粉美淘', num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                            {id: 23,title: '红粉美淘', num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                            // {id: 24,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'}
                        ]
                    },

                ],
                salelist:[
                    {id:1,text:'7月大促-抢拍专场',zhekou:1,address:"北京",time:'7天1时56分39秒'},
                    {id:2,text:'7月大促-抢拍专场',zhekou:1,address:"北京",time:'7天1时56分39秒'},
                    {id:3,text:'7月大促-抢拍专场',zhekou:1,address:"北京",time:'7天1时56分39秒'},
                    {id:4,text:'7月大促-抢拍专场',zhekou:1,address:"北京",time:'7天1时56分39秒'},
                    {id:5,text:'7月大促-抢拍专场',zhekou:1,address:"北京",time:'7天1时56分39秒'},
                    {id:6,text:'7月大促-抢拍专场',zhekou:1,address:"北京",time:'7天1时56分39秒'},
                    {id:7,text:'7月大促-抢拍专场',zhekou:1,address:"北京",time:'7天1时56分39秒'},
                ],
            }
        },
        created (){
          this.getinfo()
        },
        methods:{
            wathChildEvent(vals){//直接监听 又子组件触发的事件，参数为子组件的传来的数据
                // console.log(vals)
                this.List = vals
            },
            getinfo () {
                let _this =this
                _this.$post('/api/shop/getProjectList',
                    {
                        group_id:0,
                        place_id:0
                    },function (res) {
                        _this.$set(res.data,'length',res.data.count)
                        _this.List = Array.from(res.data);
                        _this.List.forEach(function (i) {
                            _this.$set(i,'type',2);
                            // console.log(i)
                        })
                    },function (err,errmsg) {
                        _this.$message.error(errmsg);
                    }
                )
            }
        }
    }
</script>

<style scoped lang="less">
    .swiper{
        height: 375px;
        img{
            width: 1917px;
            height: 375px;
        }
    }
.container-left{
    width: 900px;
    float: left;
}
.container-right{
    width: 260px;
    float: right;
    margin-top: 35px;
}
    .conten{
        width: 100%;
    }
</style>